<template>
	<view style="background-color: rgb(242,242,242);">
		<view class="hz-search">
			<u-search placeholder="请输入想要查询的汉字" v-model="keyword" height="70" @change="findHzOne"
				:showAction="false"></u-search>
		</view>
		<u-gap height="40"></u-gap>
		<view class="hz-container">
			<view class="hz-title">
				<view class="spec-icon"></view>
				<view class="hz-desc">【{{ hzDetail.name }}】怎么读</view>
			</view>
			<u-line></u-line>
			<view class="hz-box">
				<view class="hz-name">
					{{ hzDetail.name }}
				</view>
				<view class="hz-box-multi">
					<view class="hz-box-single">
						<view class="hz-single">拼音</view>
						<view>{{ hzDetail.pinyin }}</view>
					</view>
					<view class="hz-box-single">
						<view class="hz-single">读音</view>
						<view>{{ hzDetail.voiceText }}</view>
						<view style="margin-left: 40rpx; margin-bottom: -10rpx;">
							<u-icon name="play-circle" size="30" color="#2979ff"
								@click="playAudio(hzDetail.voiceUrl)"></u-icon>
						</view>
					</view>
					<u-line></u-line>
					<view class="hz-box-single">
						<view class="hz-single">部首</view>
						<view>{{ hzDetail.bushou }}</view>
					</view>
					<view class="hz-box-single">
						<view class="hz-single">笔画</view>
						<view>{{ hzDetail.bihua }}</view>
						<view style="margin-left: 40rpx; margin-bottom: -10rpx;">
							<u-icon name="play-circle" size="30" color="#2979ff" @click="showModal()"></u-icon>
						</view>
					</view>
					<u-line></u-line>
					<view class="hz-box-single">
						<view class="hz-single">结构</view>
						<view>{{ hzDetail.struct }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="40"></u-gap>
		<view class="hz-container">
			<view class="hz-title">
				<view class="spec-icon"></view>
				<view class="hz-desc">汉字释义</view>
			</view>
			<view class="hz-content">
				<rich-text :nodes="hzDetail.textDesc"></rich-text>
			</view>
		</view>
		<u-gap height="40"></u-gap>
		<view class="hz-container">
			<view class="hz-title">
				<view class="spec-icon"></view>
				<view class="hz-desc">基本解释</view>
			</view>
			<view class="hz-content">
				<rich-text :nodes="hzDetail.baseText"></rich-text>
			</view>
		</view>
		<u-gap height="40"></u-gap>
		<view class="hz-container">
			<view class="hz-title">
				<view class="spec-icon"></view>
				<view class="hz-desc">详细解释</view>
			</view>
			<view class="hz-content">
				<rich-text :nodes="hzDetail.detailText.replace(/\n/g, '<br>')"></rich-text>
			</view>
		</view>
		<u-gap height="40"></u-gap>
		<u-modal :show="show" @confirm="confirm">
			<view class="slot-content">
			</view>
		</u-modal>
	</view>
</template>

<script>
import { findHz } from '@/api/hz'
export default {
	data() {
		return {
			"keyword": "我",
			"hzDetail": {},
			"show": false,
		}
	},
	methods: {
		findHzOne() {
			if (this.keyword && this.keyword.length == 1) {
				findHz({ name: this.keyword }).then(res => {
					this.hzDetail = res;
				})
			}
		},
		playAudio(url) {
			if (url) {
				const innerAudioContext = uni.createInnerAudioContext();
				let playCount = 0;
				innerAudioContext.src = url;
				innerAudioContext.play();

				innerAudioContext.onEnded(() => {
					playCount++;
					if (playCount < 2) {
						innerAudioContext.play();
					}
				});
			}
		}
	},
	mounted() {
		this.findHzOne();
	}
}
</script>

<style>
.hz-search {
	padding: 10rpx 20rpx;
	background-color: #fff;
}

.hz-container {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 20rpx;
}

.hz-name {
	font-size: 40px;
	min-width: 120rpx;
	height: 120rpx;
	border: 1px solid rgba(194, 100, 66);
	margin: 20rpx;
	text-align: center;
}

.hz-desc {
	font-weight: bold;
}

.hz-title {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	padding: 20rpx 0 20rpx 20rpx;
}

.spec-icon {
	width: 6rpx;
	height: 40rpx;
	background-color: rgb(251, 175, 38);
	margin-right: 20rpx;
	border-radius: 6rpx;
}

.hz-box {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.hz-box-single {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	width: 40%;
	padding: 10rpx 0;
}

.hz-box-multi {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.hz-single {
	background-color: rgb(236, 236, 236);
	border-radius: 10rpx;
	padding: 4rpx 8rpx;
	margin-right: 20rpx;
}

.hz-content {
	font-size: 13px;
	text-indent: 2em;
	line-height: 1.5em;
	padding: 10rpx;
}

.slot-content {
	font-size: 100px;
}
</style>
